<template>
  <div style="height: 90%;">
    <el-row>
      <el-col :offset="1">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="name" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadData">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="scopeCss" style="height: 100%; overflow-y: auto;">
      <el-row>
        <el-col :span="10" :offset="1" style="margin-bottom: 5px;" v-for="(item, index) in chapterList" :key="index">
          <el-card :body-style="{ padding: '0px' }">
            <div style="padding: 10px;">
              <span>
                <RouterLink :to="`/books/detail?id=${item.id}&name=${item.name}`">{{ item.name }}</RouterLink>
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :offset="1">
        <!-- <el-pagination background layout="prev, pager, next" :total="total">
        </el-pagination> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from "vue"
import { RouterView, RouterLink } from "vue-router";
import fun from "@/api/common.js"
export default {
  data() {
    return {
      name: "",
      code: "",
      chapterList: [],
      page: 1,
      size: 14,
      total: 0
    }
  },
  created() {
    let params = fun.fun.getLocationSearch("code")
    this.code = params.code
    this.loadData();
  },
  methods: {
    loadData() {
      this.$axios.get(`/home/book/chapter/list?code=${this.code}&name=${this.name}`).then(({ data }) => {
        if (data.code == 0) {
          this.chapterList = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  },
  watch: {
    '$route.query.code': {
      handler(newv, oldv) {
        this.code = newv
        this.loadData()
      }
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.descsBox {
  text-indent: 2em;
  font-size: 12px;
  font-weight: 500;
  height: 38px;
  color: #5e5c5c;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>